<template>
    <div class="${moduleName}-${functionName}-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <!-- 功能栏 -->
            <el-form :inline="true" :model="state.queryForm" class="${moduleName}-${functionName}-search mb15">
                <#list queryList as field>
                    <el-form-item>
                        <#if field.queryFormType == 'text' || field.queryFormType == 'textarea' || field.queryFormType == 'editor'>
                            <el-input v-model="state.queryForm.${field.attrName}"
                                      placeholder="${field.fieldComment!}"></el-input>
                        <#elseif field.queryFormType == 'select'>
                            <#if field.formDict??>
                                <fast-select v-model="state.queryForm.${field.attrName}" dict-type="${field.formDict}"
                                             placeholder="${field.fieldComment!}" clearable></fast-select>
                            <#else>
                                <el-select v-model="state.queryForm.${field.attrName}"
                                           placeholder="${field.fieldComment!}">
                                    <el-option label="选择" value="0"></el-option>
                                </el-select>
                            </#if>
                        <#elseif field.queryFormType == 'radio'>
                            <#if field.formDict??>
                                <fast-radio-group v-model="state.queryForm.${field.attrName}"
                                                  dict-type="${field.formDict}"></fast-radio-group>
                            <#else>
                                <el-radio-group v-model="state.queryForm.${field.attrName}">
                                    <el-radio :label="0">单选</el-radio>
                                </el-radio-group>
                            </#if>
                        <#elseif field.queryFormType == 'date'>
                            <el-date-picker
                                    v-model="state.queryForm.${field.attrName}"
                                    type="date"
                                    value-format="YYYY-MM-DD">
                            </el-date-picker>
                        <#elseif field.queryFormType == 'datetime'>
                            <el-date-picker
                                    v-model="state.queryForm.${field.attrName}"
                                    type="datetime"
                                    value-format="YYYY-MM-DD HH:mm:ss">
                            </el-date-picker>
                        <#else>
                            <el-input v-model="state.queryForm.${field.attrName}"
                                      placeholder="${field.fieldComment!}"></el-input>
                        </#if>
                    </el-form-item>
                </#list>
                <el-form-item>
                    <el-button size="default" @click="handleQuery" type="primary" class="ml10">
                        <el-icon>
                            <ele-Search/>
                        </el-icon>
                        查询
                    </el-button>
                </el-form-item>
                <Auth :value="'${moduleName}:${functionName}:query'">
                    <el-form-item>
                        <el-button size="default" type="success" class="ml10" @click="onCURD('add')">
                            <el-icon>
                                <ele-FolderAdd/>
                            </el-icon>
                            新增
                        </el-button>
                    </el-form-item>
                </Auth>
            </el-form>
            <!-- Table -->
            <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%"
                      @selection-change="selectionChangeHandle">
                <el-table-column v-show="false" type="selection" header-align="center" align="center"
                                 width="50"></el-table-column>
                <#list gridList as field>
                    <#if field.formDict??>
                        <fast-table-column prop="${field.attrName}" label="${field.fieldComment!}"
                                           dict-type="${field.formDict}"></fast-table-column>
                    <#else>
                        <#if field.primaryPk>
                            <el-table-column v-show="false" prop="${field.attrName}" label="${field.fieldComment!}"
                                             header-align="center" align="center"></el-table-column>
                        <#else>
                            <el-table-column prop="${field.attrName}" label="${field.fieldComment!}"
                                             header-align="center" align="center"></el-table-column>
                        </#if>
                    </#if>
                </#list>
                <el-table-column label="操作" width="100">
                    <template #default="scope">
                        <Auth :value="'${moduleName}:${functionName}:edit'">
                            <el-button size="small" text type="primary" @click="onCURD('edit', scope.row)">修改
                            </el-button>
                        </Auth>
                        <Auth :value="'${moduleName}:${functionName}:delete'">
                            <el-button size="small" text type="primary" @click="onCURD('del',scope.row)">删除
                            </el-button>
                        </Auth>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination @size-change="onHandleSizeChange"
                           @current-change="onHandleCurrentChange"
                           class="mt15"
                           :pager-count="5"
                           :page-sizes="[10, 20, 30]"
                           v-model:current-page="state.queryForm.pageNum"
                           background
                           v-model:page-size="state.queryForm.pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="state.tableData.total">
            </el-pagination>
        </el-card>
        <${FunctionName}Dialog ref="${functionName}DialogRef" @refresh="formSubmit"/>
    </div>
</template>

<script setup lang="ts" name="${moduleName}${FunctionName}">
    //ModuleName ${tableComment}
    import {defineAsyncComponent, reactive, onMounted, ref} from 'vue';
    import {ElMessageBox, ElMessage} from 'element-plus';
    import {isEmpty} from '/@/utils/mms';
    import {${functionName}Api} from '/@/api/${moduleName}/${functionName}';
    import { ${FunctionName}From,${FunctionName}Vo } from '/@/api/system/sysOssConfig/type';
    // 组件
    // eslint-disable-next-line no-unused-vars
    import FastSelect from "/@/components/fast-select/src/fast-select.vue";
    // eslint-disable-next-line no-unused-vars
    import FastTableColumn from "/@/components/fast-table-column/src/fast-table-column.vue";
    // eslint-disable-next-line no-unused-vars
    import FastRadioGroup from "/@/components/fast-radio-group/src/fast-radio-group.vue";
    // 权限
    const Auth = defineAsyncComponent(() => import('/@/components/auth/auth.vue'));
    // eslint-disable-next-line no-unused-vars
    const Auths = defineAsyncComponent(() => import('/@/components/auth/auths.vue'));
    // eslint-disable-next-line no-unused-vars
    const AuthAll = defineAsyncComponent(() => import('/@/components/auth/authAll.vue'));
    const baseApi = ${functionName}Api();
    const ${functionName}DialogRef = ref();
    const ${FunctionName}Dialog = defineAsyncComponent(() => import('/@/views/${moduleName}/${functionName}/dialog.vue'));


    const state = reactive < ${FunctionName}Vo > ({
            queryForm: {
                <#list queryList as field>
                ${field.attrName}: ''<#sep>, </#sep>
                </#list>
                pageNum: 1,
                pageSize: 10
            },
            tableData: {
                data: [],
                total: 0,
                loading: false
            }
        })
    ;

    // 初始化表格数据
    const getTableData = () => {
        state.tableData.loading = true;
        baseApi.list(state.queryForm).then(res => {
            state.tableData.data = res.rows;
            state.tableData.total = res.total;
            state.tableData.loading = false;
        }).catch(async err => {
            ElMessage.warning(err);
        }).finally(() => {
        })
    };

    //搜索按钮操作
    function handleQuery() {
        state.queryForm.pageNum = 1;
        getTableData();
    }

    //选择
    const selectionChangeHandle = (val:any[]) => {
        //略
    }
    // 打开修改用户弹窗
    const onCURD = (type: string, row ? : ${FunctionName}From) =>{
        if (type === 'add') {
            ${functionName}DialogRef.value.openDialog(type);
            return false;
        }
        if (type === 'del') {
            ElMessageBox.confirm(`此操作将永久删除吗?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                baseApi.delete(row ? row.id : '').then(res => {
                    getTableData();
                    ElMessage.success('删除成功');
                }).catch(async err => {
                    ElMessage.warning(err);
                }).finally(() => {
                })
            }).catch(() => {
            });
            return false;
        }
        baseApi.query(row ? row.id : '').then(res => {
            ${functionName}DialogRef.value.openDialog(type, res.data);
        }).catch(async err => {
            ElMessage.warning(err);
        }).finally(() => {
        })
    }


    // 接收子组件传值
    const formSubmit = (row: ${FunctionName}From) => {
        if (isEmpty(row.id)) {
            //新增
            baseApi.insert(row).then(row => {
                ${functionName}DialogRef.value.closeDialog();
                ElMessage.success(row.msg)
                setTimeout(() => {
                    getTableData();
                }, 1000)
            }).catch(async err => {
                ElMessage.warning(err);
            }).finally(() => {
            })
        } else {
            //更新
            baseApi.edit(row).then(row => {
                ${functionName}DialogRef.value.closeDialog();
                ElMessage.success(row.msg)
                setTimeout(() => {
                    getTableData();
                }, 1000)
            }).catch(async err => {
                ElMessage.warning(err);
            }).finally(() => {
            })
        }
    }
    // 分页改变
    const onHandleSizeChange = (val: number) => {
        state.queryForm.pageSize = val;
        getTableData();
    };
    // 分页改变
    const onHandleCurrentChange = (val: number) => {
        state.queryForm.pageNum = val;
        getTableData();
    };
    // 页面加载时
    onMounted(() => {
        getTableData();
    });
</script>

<style scoped lang="scss">

</style>
